<template>
	<div class="goods">
		<div class="menu-wrapper" ref="menuWrapper">
			<ul>
				<li v-for="(item,index) in goods" class="menu-item" :class="{current:currentIndex===index}" @click="selectMenu(index,$event)">
					<span class="text border-1px">
						<span class="icon" v-if="item.type>0" :class="classMap[item.type]"></span>
						{{item.name}}
					</span>
				</li>
			</ul>
		</div>
		<div class="food-wrapper" ref="foodWrapper">
			<ul>
				<li v-for="item in goods" class="food-list food-list-hook">
					<h1 class="food-title">{{item.name}}</h1>
					<ul>
						<li v-for="food in item.foods" class="food-item border-1px" @click="selectedFood(food,$event)">
							<div class="icon">
								<img :src="food.icon" width="57" height="57"/>
							</div>
							<div class="content">
								<h2 class="name">{{food.name}}</h2>
								<p class="description">{{food.description}}</p>
								<div class="exta">
									<span class="count">月售{{food.sellCount}}</span>
									<span class="ratings">好评率{{food.rating}}%</span>
								</div>
								<div class="price">
									<span class="now">￥{{food.price}}</span>
									<span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
								</div>
							</div>
							<div class="control-wrapper">
								<cartcontrol :food="food"></cartcontrol>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<shopCart :minPrice="seller.minPrice" :deliveryPrice="seller.deliveryPrice" :selectFoods="selectFoods"></shopCart>
		<food :food="clickFood"  ref="detailWrapper"></food>
	</div>
</template>

<script>
	import axios from 'axios'
	import BScroll from 'better-scroll'
	import cartcontrol from '@/components/cartControl.vue'
	import shopCart from '@/components/ShopCart.vue'
	import food from '@/components/food.vue'
	export default{
		name:'goods',
		data(){
			return{
				goods:[],
				classMap:[],
				scrollHeight:[],
				scrollY:0,
				clickFood:{}
			}
		},
		props:{
			seller:{
				type:Object
			}
		},
		components:{
			cartcontrol,
			shopCart,
			food
		},
		computed:{
			//设计一个方法，计算当前滑动的显示的是菜单中的第几项
			currentIndex(){
				for(let i=0;i<this.scrollHeight.length;i++){
					let height1=this.scrollHeight[i]
					let height2=this.scrollHeight[i+1]
					//console.log(this.scrollY)
					if(!height2||(this.scrollY>=height1&&this.scrollY<height2)){
						return i
					}
				}
				return 0
			},
			selectFoods(){
				let goodsFood=[]
				for(let item of this.goods){
					for(let food of item.foods){
						if(food.count){
							goodsFood.push(food)
						}
					}
				}
				//console.log(goodsFood)
				return goodsFood
				
			}
		},
		created(){
			this.classMap=['decrease','discount','guarantee','invoice','special']
			//获取数据
			axios.get('./data.json').then(res=>{
				//console.log(res.data.goods)
				this.goods=res.data.goods
				this.$nextTick(()=>{
					this._initScroll()
					this._height()
				})
			})
		},
		methods:{
			selectedFood(food,event){
				this.clickFood=food
				//调用子组件中的方法
				this.$refs.detailWrapper.show()
			},
			_initScroll(){
				this.scrollMenu=new BScroll(this.$refs.menuWrapper,{
					click:true
				})
				this.scrollFood=new BScroll(this.$refs.foodWrapper,{
					probeType:3,//表示实时检测高度
					click:true
				})
				this.scrollFood.on("scroll",(pos)=>{
					this.scrollY=Math.abs(Math.round(pos.y))
				})
			},
			_height(){
				//把每一项取出
				let foodList=this.$refs.foodWrapper.getElementsByClassName("food-list-hook")
				//计算每一项的高度
				let height=0
				this.scrollHeight.push(height)
				for(let item of foodList){
					height+=item.clientHeight
					this.scrollHeight.push(height)
				}
				//console.log(this.scrollHeight)
			},
			selectMenu(index,event){
				if(!event._constructed){
					return
				}
				let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook')
				let el=foodList[index]
				this.scrollFood.scrollToElement(el)
			}
		}
	}
</script>

<style lang="scss">
	@import '../common/style/mixin.scss';
	.goods{
		display: flex;
		position: absolute;
		top: 177px;
		bottom: 48px;
		width: 100%;
		overflow:hidden;
		.menu-wrapper{
			flex: 0 0 80px;
			width: 80px;
			background: #f3f5f7;
			.menu-item{
				display: table;
				width: 56px;
				height: 54px;
				padding:0 12px;
				font-size: 12px;
				line-height: 14px;
				font-weight: 200;
				&.current{
					font-size: 12px;
					line-height: 14px;
					color: rgb(240,20,20);
					background: #fff;
					font-weight: 700;
					.text{
						@include border-none()
					}
				}
				.icon{
					display: inline-block;
					width: 12px;
					height: 12px;
					margin-right: 2px;
					vertical-align: top;
					background-size: 12px 12px;
					background-repeat: no-repeat;
					&.decrease{
						@include bg-image('../common/img/decrease_1')
					}
					&.discount{
						@include bg-image('../common/img/discount_1')
					}
					&.guarantee{
						@include bg-image('../common/img/guarantee_1')
					}
					&.invoice{
						@include bg-image('../common/img/invoice_1')
					}
					&.special{
						@include bg-image('../common/img/special_1')
					}
				}
				.text{
					display: table-cell;
					vertical-align: middle;
					@include  border-1px(rgba(7,17,27,0.1));
				}
				&:last-child{
					.text{
						@include border-none();
					}
					
				}
			}
		}
		.food-wrapper{
			flex: 1;
			.food-title{
				height: 26px;
				line-height: 26px;
				padding-left: 14px;
				border-left: 2px solid #d9dde1;
				background: #f3f5f7;
				color: rgb(147,153,159);
				font-size:12px;
				font-weight: 200;
			}
		}
		.food-item{
			position: relative;
			display: flex;
			margin: 18px;
			padding-bottom: 18px;
			@include  border-1px(rgba(7,17,27,0.1));
			.icon{
				flex:0 0 57px;
				border-radius: 2px;
				margin-right: 10px;
			}
			.content{
				flex: 1;
				.name{
					margin: 2px 0 8px 0;
					font-size: 14px;
					line-height: 14px;
					color: rgb(7,17,27);
					font-weight: 700;
				}
				.description,.exta{
					font-size: 10px;
					line-height: 10px;
					color: rgb(147,153,159)
				}
				.description{
					margin-bottom: 8px;
					line-height: 1.5em;
				}
				.exta{
					.count{
						margin-right: 12px;
					}
				}
				.price{
					font-weight: 700;
					line-height: 24px;
					.now{
						color: rgb(240,20,20);
						font-size: 14px;
						margin-right: 8px;
					}
					.old{
						color: rgb(147,153,159);
						font-size: 10px;
						text-decoration: line-through;
					}
				}
			}
			.control-wrapper{
				position: absolute;
				right: 0;
				bottom: 8px;
			}
		}
	}
</style>
